<template>
	<view class="personalInfo">
		<uv-navbar title="个人信息" @leftClick="goBack" bgColor="#277CC0" :placeholder="true"
			titleStyle="color:#FFFFFF;fontWeight:500" leftIconColor="#FFFFFF"></uv-navbar>
		<view class="personalBox">
			<uv-form labelPosition="left" :model="personaModel" :rules="personalRules" ref="form">
                <uv-form-item label="头像"  borderBottom  labelWidth="120rpx">
                	<button  open-type="chooseAvatar" @chooseavatar="chooseAavatar" style="text-align: left; font-size: 28rpx;" >
                        <image :src="personaModel.avatar" v-if="personaModel.avatar" mode="" style="width: 110rpx;height: 110rpx; border-radius: 50%;"></image>
                        <text v-else>请上传头像</text>
                    </button>
                </uv-form-item>
                <uv-form-item label="昵称"  borderBottom  labelWidth="120rpx">
                	<uv-input v-model="personaModel.nickname" border="none" placeholder="请输入联系人姓名(作为提交、签约使用)" >
                	</uv-input>
                </uv-form-item>
				<uv-form-item label="选择城市" borderBottom @click="checkCity" labelWidth="140rpx">
					<uv-input v-model="area" border="none" placeholder="请您选择所在城市" :disabled="true">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="详细地址"  borderBottom  labelWidth="140rpx" labelPosition="top">
					<view class="" style="padding-top: 14rpx;">
						<uv-textarea v-model="personaModel.address"  placeholder="请输入详细地址" ></uv-textarea> 
					</view>
				</uv-form-item>
				
				<uv-form-item label="联系人"  borderBottom  labelWidth="120rpx">
					<uv-input v-model="personaModel.realname" border="none" placeholder="请输入联系人姓名(作为提交、签约使用)" >
					</uv-input>
				</uv-form-item>
				<uv-form-item label="邮箱"  borderBottom  labelWidth="120rpx">
					<uv-input v-model="personaModel.email" border="none" placeholder="请输入邮箱" >
					</uv-input>
				</uv-form-item>	
			</uv-form>
		</view>
		<view class="saveBox">
			<view class="save_btn" @click="save">
				保存
			</view>
		</view>
        <uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"
            @confirm="areaConfirm"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personaModel: {
					nickname: "",
                    avatar:"",
                    area:"",
                    address:"",
                    realname:"",
                    email:""
				},
				personalRules: {},
                areaRrand: [
                    [],
                    []
                ],
                columnData:[],
                area:""
			};
		},
        onReady() {
            this.getAreaList()  
        },
		onLoad() {
            
          this.getUserInfo()
		  
		},
		methods: {
            async getUserInfo(){
                const {data} =  await this.$api.userinfo()
                // if(data.area&&this.AreaData&&this.AreaData.length){
                //     this.AreaData.map(item=>{
                //         item.child.map(i=>{
                //             if(i.id==data.area){
                //                 this.area = i.name
                //             }
                //         })
                //     })    
                // }
                this.area = data.areaname
                this.personaModel= data
            },
            areaConfirm(e) {
                this.area =  e.value[1]
                this.AreaData.map(item=>{
                    item.child.map(i=>{
                        if(i.name==e.value[1]){
                            this.personaModel.area = i.id
                        }
                    })
                })
                
            },
            carChange(e){
                    const { columnIndex , index} = e
                	if (columnIndex === 0) {
                		this.$refs.areaPicker.setColumnValues(1, this.columnData[index])
                	}
            },
            async  getAreaList(){
                let data =await this.$api.getAreaList()
                this.AreaData = data.data
                data.data.map((item,n)=>{
                    this.areaRrand[0].push({
                        name:item.name,
                        id:item.id
                    })
                    let arr= []
                    item.child.map(i=>{
                        arr.push(i.name)
                        if(n==0){
                            if(arr.length==item.child.length){
                                    this.areaRrand[1]=arr
                                    this.columnData.push(arr)
                                    arr= []
                            }
                        }else{
                            if(arr.length==item.child.length){
                                    this.columnData.push(arr)
                                    arr= []
                            }
                        }
                    })
                })
                
                
            },
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
            checkCity(type){
                    
                    this.$refs.areaPicker.open()
            },
            async chooseAavatar(e){
            
                        const result = await this.$api.uploadImg({filePath:e.detail.avatarUrl})
                        console.log(result)
                        this.personaModel.avatar = result.fullurl
                        // sureJoin()
                
            },
			async save(){
                if(!this.personaModel.nickname) return this.$utils.msg('请输入昵称')
                if(!this.personaModel.area) return this.$utils.msg('请选择所在城市')
                // if(!this.personaModel.address) return this.$utils.msg('请输入详细地址')
                if(!this.personaModel.realname) return this.$utils.msg('请输入联系人')
                // if(!this.personaModel.email) return this.$utils.msg('请输入邮箱')
                
                  const res = await this.$api.editUserInfo(this.personaModel)
                  
                  if(res.code==1){
                      this.$utils.msg('操作成功')
                      setTimeout(()=>{
                          uni.navigateBack()
                      },800)
                  }else{
                      this.$utils.msg(res.msg)
                  }
            }
		}
	}
</script>

<style lang="scss" scoped>
	.personalInfo {
		min-height: 100vh;
		background-color: RGBA(245, 245, 245, 1);
        position: relative;
		.personalBox {
			padding: 0rpx 19rpx;
		}
		.saveBox{
			width: 750rpx;
			height: 118rpx;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			.save_btn{
				width: 710rpx;
				height: 80rpx;
				background: #277CC0;
				border-radius: 8rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
</style>